<template>
  <div class="login-container">
    <!-- loogo -->
    <img src="../../assets/images/logo.png" class="logo" alt="">

    <!-- 去登陆 -->
    <div class="login-form" :class="{ sign: !showTitle }">
      <div class="login-form-title">
        <h1>后台管理系统</h1>
        <span @click="changeShow">{{ showTitle ? "去注册" : "去登陆" }}</span>
      </div>

      <!-- 表单 -->
      <el-form
        :model="formDate"
        label-width="auto"
        :rules="loginRules"
        label-position="top"
        ref="Form"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            name="username"
            v-model="formDate.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            name="password"
            v-model="formDate.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>

        <template v-if="!showTitle">
          <el-form-item prop="repassword" label="密码">
            <el-input
              name="repassword"
              v-model="formDate.repassword"
              type="password"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item>
        </template>

        <el-form-item>
          <el-button
            class="login-form-button"
            @click="formSubmit"
            type="primary"
            >{{ showTitle ? "登录" : "注册" }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import router from '@/router'

import { Message } from 'element-ui'
export default {
  name: 'componentLogin',
  data () {
    return {
      formDate: {
        username: 'sdf09',
        password: '111111',
        repassword: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空！' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 11, trigger: 'blur', message: '密码长度为6-12位' }
        ],
        repassword: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 11, trigger: 'blur', message: '密码长度为6-12位' },
          { trigger: 'blur', validator: this.validaterePassword }
        ]
      },
      showTitle: true
    }
  },
  methods: {
    // 自定义校验规则，校验两次密码是否一致
    validaterePassword (rule, value, callback) {
      if (value !== this.formDate.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    },

    // 切换 showTitle 的值
    changeShow () {
      // 切换 登录 | 注册
      // 请求表单校验规则，重置数据
      this.showTitle = !this.showTitle
      this.resetForm()
    },

    // 重置数据、清空表单校验的方法
    resetForm () {
      const Form = this.$refs.Form
      Form.resetFields()
      this.formDate = {
        username: '',
        password: '',
        repassword: ''
      }
    },

    // 表单提交
    formSubmit () {
      // 登录 | 注册
      if (this.showTitle) {
        // 登录成功（token已存储） => 清空表单
        store.dispatch('user/userLogin', this.formDate).then((res) => {
          this.$message.success('登录成功')
          router.push('/')
        })
      } else {
        //  提示注册成功 => 存储用户名密码 => 清空表单 => 切换为登录 ==> 自动填充内容
        store.dispatch('user/userReg', this.formDate).then((res) => {
          Message.success('注册成功')
          this.changeShow()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/login_bg.jpg");
  position: relative;

  .logo {
    width: 102px;
    height: 42px;
    position: absolute;
    top: 30px;
    left: 50px;
  }

  .login-form {
    width: 540px;
    height: 464px;
    background: #ffffff;
    box-shadow: 0px 0px 28px 0px rgba(21, 43, 99, 0.08);
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 60px;
    padding-top: 48px;
    transition: height 0.3s;
    &.sign {
      height: 560px;
    }

    // 文字盒子
    .login-form-title {
      width: 100%;
      text-align: center;
      margin-bottom: 30px;
      h1 {
        height: 44px;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #131523;
        line-height: 44px;
        text-align: center;
      }

      span {
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #1e5eff;
        line-height: 24px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #4f81ff;
        }
      }
    }

    .login-form-button {
      margin-top: 10px;
      width: 100%;
      height: 48px;
      transition: background-color 0.3s;

      &:hover {
        background-color: #608dff;
      }
    }
  }
}

:deep(.el-form-item__label) {
  font-size: 14px;
  font-family: AppleSystemUIFont;
  color: #5a607f;
  line-height: 20px;
}
</style>
